<template>
    <div class="Timeline">
        <div class="noKeshiData" v-if="NoKeshiData"></div>
        <el-row v-for="(val,index) in data" :key="val.id" class="TimeLineWarp" v-if="!NoKeshiData">
            <div class="lineBar"></div>
            <div class="circularBar"></div>
            <el-col :span="24" class="title">
                <div style="height: 56px;line-height: 56px;border-radius: 30px;background: #e5e9f2;width: 40%;position: relative;">
                    <div style="height: 56px;width: 56px;position: absolute;border-radius: 50%;background: #81a4ff;box-shadow: rgba(0,0,0,.25) -5px 5px 10px 0px;text-align: center;color: #fff;text-align: center;font-size: 32px;">
                        {{index+1}}
                    </div>
                    <span style="position: relative;left: 80px;font-size: 26px;">{{val.StepName}}</span>
                </div>
            </el-col>
            <el-row :gutter="20" class="list">
                <el-col class="card-item" :span="4" v-for="(list,I) in val.Resources" :key="list.ReOrginName">
                    <el-card :body-style="{ padding: '0px' }" class="kapian">
                        <div :class="ResourceItemClass(I,list.ResourceID)" @dblclick="getResource(list)"
                             @click.stop="ResourceTips(list.ReOrginName,ResourceItemClass(I,list.ResourceID))">
                            <img style="width: 60px;display: block;height: 60px;margin: 10px auto;"
                                 :src="IMGSRC(list.TechType,list.ReTypeCode)">
                            <div style="padding: 14px;">
                                <span class="stemTitle"
                                      style="white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display: block;font-size: 16px;height: 22px;line-height: 22px;text-align: center;color: #56545a"
                                      v-html="list.ReOrginName"></span>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </el-row>
        <!--tiny/small/large/full-->
        <!--视频弹窗-->
        <!--<el-dialog :title="popTitle" v-if="dialogVideoVisible" v-model="dialogVideoVisible">-->
        <!--<el-row>-->
        <!--<el-col :span="24">-->
        <!--<div v-html="videoURL"></div>-->
        <!--</el-col>-->
        <!--</el-row>-->
        <!--</el-dialog>-->
        <!--音频弹窗-->
        <!--<el-dialog :title="popTitle" v-if="dialogAudioVisible" v-model="dialogAudioVisible">-->
        <!--<el-row>-->
        <!--<el-col :span="24">-->
        <!--<div v-html="audioURL"></div>-->
        <!--</el-col>-->
        <!--</el-row>-->
        <!--</el-dialog>-->
        <!--图片弹窗-->
        <!--<el-dialog :title="popTitle" v-if="dialogImgVisible" v-model="dialogImgVisible">-->
        <!--<el-row>-->
        <!--<el-col :span="24">-->
        <!--<div v-html="imgURL"></div>-->
        <!--</el-col>-->
        <!--</el-row>-->
        <!--</el-dialog>-->
        <!--PPT弹窗-->
        <!--<el-dialog size="full" :title="popTitle" v-if="dialogPPTVisible" v-model="dialogPPTVisible">-->
        <!--<el-row>-->
        <!--<el-col :span="24">-->
        <!--<ppt :imgList="pptData"></ppt>-->
        <!--</el-col>-->
        <!--</el-row>-->
        <!--</el-dialog>-->


        <!--上课状态的素材资源弹出层-->
        <transition enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
            <material :materialSrc="material" v-show="TeachMaterial">
            </material>
        </transition>


        <!--自学任务单弹窗-->
        <el-dialog size="large" :title="popTitle" v-if="dialogTaskVisible" v-model="dialogTaskVisible">
            <el-row>
                <el-col :span="24">
                    <taskList :taskList="taskData"></taskList>
                </el-col>
            </el-row>
        </el-dialog>
        <!--单试题弹窗-->
        <transition enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
            <SHITI :QuestionDATA="Question" v-if="dialogSHITIVisible.show" :showModel="dialogSHITIVisible"></SHITI>
        </transition>
        <!--课堂测验弹窗-->
        <transition enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
            <classTest :QuestionDATA="Question" v-if="dialogClassTestisible.show"
                       :showModel="dialogClassTestisible"></classTest>
        </transition>
    </div>
</template>

<script>
    import {mapGetters, mapActions} from 'vuex'
    import store from '../../store/'
    import TaskList from '../TaskList/TaskList.vue'
    import SHITI from '../SHITI/SHITI.vue'
    import classTest from '../classTest/classTest.vue'
    import material from '../material.vue'
    export default {
        name: "Timeline",
        props: ['data'],
        computed: {
            ...mapGetters([
                "resourceURL",
                'NoKeshiData',
                'showResource',
                'dialogClassTestisible',
                'dialogSHITIVisible',
                'TeachMaterial'
            ])
        },
        data () {
            return {
                pptData: [],
                taskData: [],
                dialogTaskVisible: false,//自学任务单弹窗
                videoURL: "",
                audioURL: "",
                imgURL: "",
                shitiTitle: "",
                Question: {},//试题
                popTitle: "",
                material: ""
            }
        },
        components: {
            taskList: TaskList,
            SHITI: SHITI,
            classTest: classTest,
            material: material
        },
        mounted(){
            var ViewCont = document.getElementsByClassName('ViewCont')[0]
            ViewCont.onclick = function () {
                $('.layui-layer.layui-layer-tips.layer-anim').remove()
            }
        },
        methods: {
            ...mapActions([]),
            ResourceTips(msg, className){
                layer.tips("<span style='color:#fff'>" + msg + "</span>", '.' + className, {
                    tips: [2, '#204FC9'],
                    time: 0,
                })
            },
            getResource(list){
                var _this = this;
                store.state.mutations.showResource = true;
                console.group('资源信息ID')
                console.log(list.ResourceID)
                window.ResourceID = list.ResourceID
                console.groupEnd()
                $('.layui-layer.layui-layer-tips.layer-anim').remove()//题干提示框
//                console.log(list.ResourceID)
                _this.$http.get(('api/resource/get?ids=' + list.ResourceID + '&sk=' + store.state.mutations.getToken)).then(function (res) {
                    console.log(res.data.data)
                    store.state.mutations.resource = res.data.data
                    //课件--PPT
                    if (res.data.data[0].ReTypeCode === "RE0001") {
//                        _this.dialogPPTVisible = true
                        console.log(res.data.data)

                        OpenPpt(resourceURL + res.data.data.ResourceName)

                    }
                    if (res.data.data[0].ReTypeCode === "RE0008") {
                        layer.alert('打开word(导学案)文档')
                    }
                    if (res.data.data[0].ReTypeCode === "RE0007") {
                        layer.alert('打开word(教案)文档')
                    }
                    if (res.data.data[0].ReTypeCode === "RE0002") {
                        layer.alert('试卷')
                    }
                    //自学任务单
                    if (res.data.data[0].ReTypeCode === "RE0003") {
                        _this.dialogTaskVisible = true
                        _this.popTitle = res.data.data[0].ReOrginName
                        _this.taskData = res.data.data[0].child
                    }

                    //资源 判断资源类型
                    if (res.data.data[0].ReTypeCode === "RE0013") {
                        if (res.data.data[0].TechType === 0) {//视频资源
                            _this.videoURL = "<video style='width: 100%;height: 100%' controls='controls' src=" + store.state.mutations.resourceURL + res.data.data[0].ResourceName + "></video>"
                            if (store.state.mutations.BeginTeaching === false) {
                                layer.open({
                                    type: 1,
                                    area: ['800px'], //宽高
                                    content: _this.videoURL,
                                    closeBtn: 0, //不显示关闭按钮
                                    shadeClose: true,
                                    title: res.data.data[0].ReOrginName
                                });
                            }

                            if (store.state.mutations.BeginTeaching === true) {
                                store.state.mutations.TeachMaterial = true;
                                _this.material = _this.videoURL
                            }
                        } else if (res.data.data[0].TechType === 5) {//音频资源
                            _this.audioURL = "<audio style='width: 100%;' controls='controls' src=" + store.state.mutations.resourceURL + res.data.data[0].ResourceName + "></audio>"
                            if (store.state.mutations.BeginTeaching === false) {
                                layer.open({
                                    type: 1,
                                    area: ['800px'], //宽高
                                    content: _this.audioURL,
                                    closeBtn: 0, //不显示关闭按钮
                                    shadeClose: true,
                                    title: res.data.data[0].ReOrginName
                                });
                            }
                            if (store.state.mutations.BeginTeaching === true) {
                                store.state.mutations.TeachMaterial = true;
                                _this.material = _this.audioURL
                            }
                        } else if (res.data.data[0].TechType === 1) {//图片资源
                            _this.imgURL = "<img style='width: 100%;height: 100%' src=" + store.state.mutations.resourceURL + res.data.data[0].ResourceName + "/>"
                            if (store.state.mutations.BeginTeaching === false) {
                                layer.open({
                                    type: 1,
                                    area: ['800px'], //宽高
                                    content: _this.imgURL,
                                    closeBtn: 0, //不显示关闭按钮
                                    shadeClose: true,
                                    title: res.data.data[0].ReOrginName
                                });
                            }
                            if (store.state.mutations.BeginTeaching === true) {
                                store.state.mutations.TeachMaterial = true;
                                _this.material = _this.imgURL
                            }
                        }
                    }

                    //作业
                    if (res.data.data[0].ReTypeCode === "RE0010") {
                        //更改试题title
                        _this.shitiTitle = res.data.data[0].child.QuestionRemark
                        _this.Question = res.data.data[0]
                        console.log(_this.Question)
                        store.state.mutations.dialogClassTestisible.show = true
                    }
                    //课堂测验
                    if (res.data.data[0].ReTypeCode === "RE0009") {
                        //更改试题title
                        _this.shitiTitle = res.data.data[0].child.QuestionRemark
                        _this.Question = res.data.data[0]
                        console.log(_this.Question)

                        store.state.mutations.dialogClassTestisible.show = true
                    }
                    //题型 判断不同题型类型
                    if (res.data.data[0].ReTypeCode === "RE0011") {
                        //更改试题title
                        _this.shitiTitle = res.data.data[0].child.QuestionRemark
                        //试题具体信息
                        _this.Question = res.data.data[0]
                        console.log(_this.Question)
                        //显示试题弹窗
                        store.state.mutations.dialogSHITIVisible.show = true
                        //试题类型
//                        题型(QuestionTypeCode)：
//                        单选 QUE0003
//                        多选 QUE0007 => QUE0037
//                        阅读理解 QUE0008
//                        主观题 QUE0042
//                        复合题 QUE0043
//                        图文匹配题 QUE0046
//                        归类题 QUE0049
//                        文字排序题 QUE0138
//                        图片排序题 QUE0139
//                        文字连线题 QUE0140
//                        图片连线题 QUE0141
//                        听力判断题 QUE0143
//                        听力文字连线题 QUE0145
//                        听力图片连线题 QUE0146
//                        判断题 QUE0142
//                        听力单项选择 QUE0147
                        _this.Question.QuestionTypeCode = res.data.data[0].child.QuestionTypeCode
                    }
                })
            },
            IMGSRC(TechType, ReTypeCode){
                if (ReTypeCode === "RE0001") {
                    return "src/assets/images/svgico/ppt.svg"
                } else if (ReTypeCode === "RE0002") {
                    return "src/assets/images/svgico/试卷.svg"
                } else if (ReTypeCode === "RE0003") {
                    return "src/assets/images/svgico/自学任务单.svg"
                } else if (ReTypeCode === "RE0004") {
                    return "src/assets/images/svgico/自学任务单.svg"
                } else if (ReTypeCode === "RE0005") {
                    return "src/assets/images/svgico/自学任务单.svg"
                } else if (ReTypeCode === "RE0006") {
                    return "src/assets/images/svgico/互动题板.svg"
                } else if (ReTypeCode === "RE0007") {
                    return "src/assets/images/svgico/教案.svg"
                } else if (ReTypeCode === "RE0008") {
                    return "src/assets/images/svgico/word.svg"
                } else if (ReTypeCode === "RE0009") {
                    return "src/assets/images/svgico/测验.svg"
                } else if (ReTypeCode === "RE0010") {
                    return "src/assets/images/svgico/作业.svg"
                } else if (ReTypeCode === "RE0011") {
                    return "src/assets/images/svgico/试题.svg"
                } else if (ReTypeCode === "RE0012") {
                    return "src/assets/images/svgico/自学任务单.svg"
                } else if (ReTypeCode === "RE0013") {
                    if (TechType === 0) {
                        return "src/assets/images/svgico/视频.svg"
                    } else if (TechType === 1) {
                        return "src/assets/images/svgico/图片.svg"
                    } else if (TechType === 2) {
                        return "src/assets/images/svgico/word.svg"
                    } else if (TechType === 3) {
                        return "src/assets/images/svgico/pdf.svg"
                    } else if (TechType === 4) {
                        return "src/assets/images/svgico/作业.svg"
                    } else if (TechType === 5) {
                        return "src/assets/images/svgico/音频.svg"
                    } else if (TechType === 6) {
                        return "src/assets/images/svgico/视频.svg"
                    }
                }
            },
            ResourceItemClass(index, ID){
                return 'ResourceItem' + index + ID;
            }
        }
    }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>

    .Timeline {
        height: 100%;
        position: relative;
        top: 0;
    }

    .Timeline::-webkit-scrollbar {
        width: 0px
    }

    .el-dialog {
        background: #000;
    }

    .kapian {
        cursor: pointer;
    }

    .popVideo {
        width: 100%;
    }

    .title {
        margin-bottom: 14px;
    }

    .card-item {
        margin-bottom: 14px;
    }
</style>
